
import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
  
export default function Home() {
  // console.log(useNavigate());
  //  const useNavigate =useNavigate();
  // useNavigate
  // 返回一个函数用来编程式导航  
  // navigate（目标路径） 可以用跳转得到指定的路径
  
  const navigate = useNavigate()
  const toMusicHandle = () => {
    navigate('/main/home/music/001?user=sola&id=001',{
      state:[
        {id:"001",name:"歌曲1"},
        {id:"002",name:"歌曲2"},
        {id:"003",name:"歌曲3"},
        {id:"004",name:"歌曲4"}
      ]
    })
  }
  const toNewsHandle = () => {
    navigate('/main/home/news/002?user=newspaper&id=002',{
      state:[
        {id:"001",name:"新闻1"},
        {id:"002",name:"新闻2"},
        {id:"003",name:"新闻3"},
        {id:"004",name:"新闻4"}
      ]
    })
  }

  

  return (
    <div>
      <h2>home</h2>
      <button onClick={toMusicHandle}>Music</button>
      <button onClick={toNewsHandle}>News</button>
      <Outlet />
    </div>
  )
}
